<template>
    <view class="containers">
        <view class="category_nav"   >
            <view class="category">
                <view @click="getOrderList(4)" :class="status==4?'category-item active':'category-item'">
                    全部订单
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="status==4?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getOrderList(0)" :class="status==0?'category-item active':'category-item'">
                    待支付
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="status==0?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getOrderList(1)" :class="status==1?'category-item active':'category-item'">
                    已支付
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="status==1?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getOrderList(-1)" :class="status==-1?'category-item active':'category-item'">
                    已取消
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="status==-1?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
            </view>
        </view>
        <view style="    margin-top: 100rpx;">
            <view class="orderList" v-if="list  .length > 0">
                <view class="item" v-for="(item,index) in list" :key="index">

                    <view class="title">
                        <view class="publiser" >
                            <image :src="item.avatar" mode="aspectFill"></image>
                            <text>{{item.nickname}}</text>
                        </view>
                        <view class="cancel_btn" v-if="item.status == -1" >订单已取消</view>
                        <view class="cancel_btn" v-if="item.status == 1" >订单已完成</view>
                        <view class="cancel_btn" v-if="item.status == 0" >订单待支付</view>
                    </view>
                    <view class="order">
                        <view class="box">
                            <view class="text">商家名称</view>
                            <view class="input">
                                {{item.shop_name}}
                            </view>
                        </view>
                    </view>
                    <view class="order">
                        <view class="box">
                            <view class="text">交易时间</view>
                            <view class="input">
                                {{item.add_time}}
                            </view>
                        </view>
                    </view>
                    <view class="order">
                        <view class="box">
                            <view class="text">支付类型</view>
                            <view class="input">
                                {{item.type_name}}
                            </view>
                        </view>
                    </view>
                    <view class="order">
                        <view class="box">
                            <view class="text">充值金额</view>
                            <view class="input">
                                ¥{{item.price}}
                            </view>
                        </view>
                    </view>
                    <view style="height: 30rpx;background-color: #fff;"  v-if="item.ship_type==2 && is_app"></view>
                    <view class="type">
                        <view class="order_tips" v-if="item.order_tips!=''">{{item.order_tips}}</view>
                        <view class="btns"  >
                            <view class="btn_2">
                            <button class="btn_2" type="default" open-type="contact" >
                            联系客服
                            </button>		
                        </view>
                            <text class="btn_3" v-if="item.status == 0"  @click="prepay(item.id,code,item.price)">去支付</text>
                            <text class="btn_3" v-if="item.status == 0"  @click="setOrderStatus(item,-1,index)">取消订单</text>
                            <view class="btn_2" style="margin-left: 20rpx;" v-if="item.status == 1 && item.invoice == 0"   @click="expedite(item,index)">申请发票</view>
                        
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="nodata" v-if="list.length == 0 ">暂无更多数据</view>
        <tabbar :type="3" :showissue="showissue" @closeissue="closeissue" @openissue="openissue"></tabbar>
    </view>
</template>
<script>
export default {
    data() {
        return {
            list:[],
            page:1,
            pagesize:20,
            status:4,
            code:'',
            bottom:false,
            bottom_1:false,
			userInfo:'',
            showissue:false,
        }
    },
    onLoad(p){
        this.token = uni.getStorageSync('token');
        if(p.status){
            this.status = p.status;
        }
    },
	onShow: async function () {
		this.userInfo=uni.getStorageSync('userInfo');
        if(this.userInfo){
            this.getOrderInfo();
            this.up_code();
        }
	},
    // 下拉刷新
    onPullDownRefresh() {
        let that = this;
        this.page=1;
        this.list.length=0;
        setTimeout(function () {
            that.getOrderInfo();
            uni.stopPullDownRefresh();
        }, 200);
    },
    onReachBottom() {
        this.page=++this.page;
        this.getOrderInfo_1();
    },
    methods: {
        setOrderStatus(item,status,index){
            var that = this;
            var title = '提示';
            var content = '是否确定取消订单?';
            uni.showModal({
                title: title,
                content: content,
                success: function (res) {
                    if (res.confirm) {
                        //更新订单状态
                        that.$show();
                        uni.request({
                            url: 'https://oa.yuxiang123.cn/api/order/setShopOrderStatus',
                            header: {
                                "content-type": "application/x-www-form-urlencoded"
                            },
                            method: 'POST',
                            data:{
                                token:uni.getStorageSync('token'),
                                id:item.id,
                                status:status,
                            },
                            success: (res) => {
                                if(res.data.code == 1){
                                    that.$Toast('取消成功');
                                    that.list[index].status = -1;
                                }else{
                                    that.$Toast('操作失败');
                                }
                            }
                        })
                    }
                }
            });
        },
        
        up_code(){
            var that = this;
            uni.login({
                provider: 'weixin', 
                success: function (res) {
                    that.code = res.code;
                }
            });
        },
        prepay(order_id,code,price){
            this.isTextPopup = false;
            var that = this;
            var data = {
                token:uni.getStorageSync('token'),
                code:code,
                order_id:order_id,
                price:price,
                payment: 'wechat',
                shop_id:that.userInfo.shop_id
            };
            // #ifdef APP-PLUS
            var data = {
                token:uni.getStorageSync('token'),
                code:code,
                order_id:order_id,
                price:price,
                payment: 'wechat',
                platform: 'App',
                shop_id:that.userInfo.shop_id
            };
            // #endif
            uni.request({
                url: 'https://shop.yuxiang123.cn/api/pay/shop_prepay',
                header: {"content-type": "application/x-www-form-urlencoded"},
                method: 'POST',
                data:data,
                success: (res) => {
                    if(res.data.code == 0){
                        this.$Toast(res.data.msg);
                        if(res.data.msg == '订单支付金额错误'){
                            setTimeout(function () {
                                uni.switchTab({
                                    url:'/pages/order/orderList'
                                });
                            }, 800);
                        }
                        return false;
                    }
                    // #ifdef MP-WEIXIN
                    uni.requestPayment({
                        provider: 'wxpay',    //支付类型-固定值
                        timeStamp: res.data.data.pay_data.timeStamp, // 时间戳（单位：秒）
                        nonceStr: res.data.data.pay_data.nonceStr, // 随机字符串
                        package: res.data.data.pay_data.package, // 固定值
                        signType: res.data.data.pay_data.signType, //固定值
                        paySign: res.data.data.pay_data.paySign, //签名
                        success: function (res) {
                            that.setMessage(res,1);
                        },
                        fail: function (err) {
                            that.setMessage(err,2);
                        }
                    });
                    // #endif
                    // #ifdef APP-PLUS
                    uni.requestPayment({
                        provider: 'wxpay',    //支付类型-固定值
                        orderInfo: res.data.data.pay_data, //微信订单数据(官方说是string。实测为object)
                        success: function (res) {
                            that.setMessage(res,1);
                        },
                        fail: function (err) {
                            that.setMessage(err,2);
                        }
                    });
                    // #endif
                }
            })
        },
        setMessage(res,type){
            var that = this;
            uni.request({
                url:'https://oa.yuxiang123.cn/api/index/addLog',
                method:'POST',
                header:{"content-type":"application/x-www-form-urlencoded"},
                data:{'content':'支付完成','type':type,'res':res},
            })
            this.up_code();
            if(type == 1){
               
                this.$Toast('充值成功');
                this.toPages('merchant/shop/withdraw');
                
            }else{
                this.$Toast('支付失败');
            }
        },
        closeissue:function(){
            this.showissue=false;
        },
        openissue:function(){
            this.showissue=true;
        },
        getOrderList(index = ''){
            this.status=index;
            this.page=1;
            this.list.length=0;
            this.bottom=false;
            this.getOrderInfo();
        },
        getOrderInfo(){
			var that=this;
            if(this.status == 4){
                var status = '';
            }else{
                var status = this.status;
            }
            that.$show();
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/shop_order',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:1,
                    pagesize:that.pagesize,
                    status:status
				},
				method: 'POST',
				success: (res) => {
                    that.$hide()
                    if(res.data.code == 1){
						that.list = res.data.data;
                        if(res.data.data.length<that.pagesize){
                            that.bottom=true;
                        }else{
                            that.bottom=false;
                        }
                    }
				}
			})		
        },
        getOrderInfo_1(){
			var that=this;
            if(that.bottom){
                return false;
            }
            if(this.status == 4){
                var status = '';
            }else{
                var status = this.status;
            }
            that.$show();
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/shop_order',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:that.page,
                    pagesize:that.pagesize,
                    status:status
				},
				method: 'POST',
				success: (res) => {
                    that.$hide()
                    if(res.data.code == 1){
                        that.list = that.list.concat(res.data.data);
                        if(res.data.data.length<that.pagesize){
                            that.bottom=true;
                        }else{
							that.bottom=false;
						}
                    }
				}
			})		
        },
        
        toPages:function(url,is_login = false){
			this.userInfo = uni.getStorageSync('userInfo');
			if(is_login && !this.userInfo){
				url='/subone/public/login';
			}
			console.log(url)
            if(url){
                uni.navigateTo({
                    url:url
                })
            }
        },
    }
}
</script>
<style>
    page{
        background-color: #f4f5f7;
    }
    </style>
<style lang="scss">
    .containers{
        padding-bottom: 150rpx;
    }
.delImgs{
    z-index: 1;
    width: 50rpx;
    height: 50rpx;
    position: relative;
    right: -94%;
    top: -156rpx;
}
.delImgs1{
    z-index: 1;
    width: 50rpx;
    height: 50rpx;
    position: relative;
    right: -94%;
    top: -185rpx;
}
.nodata{
    width:100%;
    height:100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    color:#999;
}
.taskList{
	width: 94%;
	margin-left: 3%;
	border-radius: 20rpx;
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	height: 170rpx;
}
.taskTitle{
	font-size: 34rpx;
	font-weight: 600;
	line-height: 60rpx;
	margin-top: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.getTask{
	background: #FED43E;
	height: 65rpx;
	line-height: 65rpx;
	width: 160rpx;
	text-align: center;
	border-radius: 30rpx;
	
}






.hidden{
	display: none;
}
.show{
	display: inline-block;

}
.category_img{
	width: 46rpx;
}
.category_nav{position: fixed;
    width: 100%;
    background: #fff;
    top: -1px;
    z-index: 1000;}
.category_nav .category{height:80rpx; display: flex;align-items: center;justify-content: space-between;overflow-x: scroll;}
.category_nav .category .category-item{ text-align: center;font-size:28upx;white-space: nowrap;margin:0 35rpx;}
.category_nav .category .category-item.active{font-weight: bold;font-weight: 600;font-size:34upx;}
.category_nav .category::-webkit-scrollbar {  
display: none;  
width: 0 !important;  
height: 0 !important;  
-webkit-appearance: none;  
background: transparent;  
}


.pages{
	background-color:#f4f5f7;
}
	.ts{
	font-size: 27rpx;
	color: #666;
	padding: 30rpx;
	background: #fff;
    margin-bottom: 10rpx;
}
.orderList{
	.item{	
		padding:0 0 30upx 0;
		overflow: hidden;
		.address{display: flex;justify-content: space-between;align-items: center;
			background-color: #FFFFFF;					
			padding:20upx 30upx;
			margin-bottom: 20upx;
			.address_info{
				padding-left:20upx;
				padding-right: 60upx;
				flex:1;
				.address_name{font-size:32rpx;color:#555;
					height:60rpx;line-height: 60rpx;
					.address_tel{font-size:32rpx;color:#999;margin-left: 20upx;}
				}
				.address_detail{line-height:40rpx; font-size: 28rpx;color:#555;}
			}
			.copy{width:64rpx;margin:20rpx 0;color:#1890ff;font-size: 24rpx;text-align: center;}
			.copy .copy_icon{width:40upx;height:40upx;}
		}
		
		.title{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: #FFFFFF;		

			align-items: center;
			padding: 20upx 30upx;
			.publiser{
				image{
					width:60upx;
					height:60upx;
					border-radius: 50%;
					float:left;
				}
				text{
					font-size: 28upx;
					margin-left: 20upx;
					line-height:60upx;
					color:#777;
				}
			}
			.cancel_btn{height:50rpx;line-height:50rpx;font-size:24rpx;color:#aaa;float:right;}
		}
		.shop{
			background-color: #fff;
			display: flex;
			padding:20upx 30upx;
			.img{
				image{
					width: 200upx;
					height: 200upx;
					border-radius: 10upx;
				}
			}
			.info{
				flex: 1;
				margin-left: 20upx;
				.name{
					min-height:150rpx;
					line-height:45rpx;;
					color: #333333;
					font-size: 32rpx;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.num{
					display: flex;
					align-items: center;
					
					.price{
						display: flex;
						align-items: center;
						margin-top:10rpx;
						image{
							width: 40upx;
							height:40upx;
						}
						text{
							color: #000;
							margin-left: 10upx;
							font-size: 34upx;
							line-height: 40upx;
						}
					}
				}
			}
		}
		.type{
			background-color: #fff;
			padding:0upx 30upx 20upx 30upx;
			font-size: 24upx;
			.text{
				display: block;
				color: red;
			}
			.order_tips{width:100%;padding:0 0 20rpx 0;font-size:24rpx;color:#f30;line-height:44rpx;}
			.btns{
				display: flex;
				justify-content:flex-end;
				font-size:24rpx;
				.btn_1{
					height:52rpx;
					line-height:52rpx;
					background-color: #ff9d1b;
					color:#fff;
					font-weight: bold;
					padding:0 30rpx;
					border-radius: 26rpx;
				}
				.btn_2{					
					display: flex;
					font-size: 28rpx;
					width: 170rpx;
					height: 60rpx;
					justify-content: center;
					align-items: center;
					gap: 20rpx;
					flex-shrink: 0;
					border-radius: 60rpx;
					background: #F3F3F3;
				}
				.btn_3{
					margin-left: 20rpx;
					display: flex;
					font-size: 28rpx;
					width: 170rpx;
					height: 60rpx;
					justify-content: center;
					align-items: center;
					gap: 20rpx;
					flex-shrink: 0;
					border-radius: 60rpx;
					background: #FED43E;
				}
			}
		}
	}
}
.order{
	background-color: #FFFFFF;
	padding: 0 40upx;
	.box{
		display:flex;
		align-items: center;
		height: 70rpx;
		font-size: 26upx;
		.text{
			color: #333333;
			font-size: 30upx;
		}
		.num{
			flex: 1;
			text-align: right;
			color: #999999;
			padding-right: 10rpx;
		}
		.input{
			flex: 1;
			text-align: right;
			color: #999999;
			input{
				font-size: 26upx;
			}
		}
		.copy{
			border-radius: 20rpx;
			border: 1rpx solid #CBCBCB;
			width: 200rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			position: absolute;
			right: 40rpx;
			margin-top: 20rpx;
			font-size: 25rpx;
			color: #000;
		}
	}
}
</style>

